<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-1">
            <button type="button" class="btn btn-success add-btn" (click)="openModal(template);add()">Add a skill</button>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-lg-offset-1 bg-info skills_panel">
            <h4 class="modal-title pull-left">My Skills</h4>
            <button type="button" class="btn btn-warning skillbtn" *ngFor="let selectedOption of selectedOptions" (click)="openModal(deletetemplate);deleteId = selectedOption.id" tooltip="click to delete" placement="top">{{selectedOption.name}}</button>
        </div>
        <div class="col-lg-8 col-lg-offset-1 bg-info skills_panel">
            <h4 class="modal-title pull-left">My Calendar</h4>
            <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
                <input class="form-control" placeholder="Date range picker" [(ngModel)]="bsRangeValue" bsDaterangepicker [minDate]="minDate" [maxDate]="maxDate" [bsConfig]="{ rangeInputFormat: 'YYYY/MM/DD' }">
            </div>
            <button type="button" class="btn btn-primary" (click)="saveDate()">Save</button>
        </div>
    </div>
</div>

<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Add Skills</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
        <div class="row">
            <!-- <div class="row">
            <div class="col-xs-6 col-6 col-md-8 col-lg-8">
                <bs-sortable [(ngModel)]="selectedOptions" fieldName="name" itemClass="sortable-item" itemActiveClass="sortable-item-active" placeholderItem="Drag here" placeholderClass="placeholderStyle" wrapperClass="sortable-wrapper"></bs-sortable>
                <pre class="code-preview col-lg-8 col-lg-offset-1">{{ selectedOptions | json }}</pre>
            </div>
        </div> -->
            <!-- <div class="form-group">
                <div class="btn-group col-lg-offset-1" dropdown>
                    <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-basic">
                        Please select a skill <span class="caret"></span>
                    </button>
                    <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
                        <li role="menuitem" *ngFor="let item of tags"><a class="dropdown-item" href="javascript:void(0);" (click)="name = item;">{{item}}</a></li>
                    </ul>
                </div>
            </div> -->
            <label class="col-lg-1 col-lg-offset-1 control-label" for="skills">Skills</label>
            <div class="col-lg-8 add_skill_panel">
                <button type="button" class="btn btn-warning skillbtn" *ngFor="let selectedOption of selectedOptions" (click)="openModal(deletetemplate);deleteId = selectedOption.id" tooltip="click to delete" placement="top">{{selectedOption.name}}</button>
            </div>
            <div class="col-lg-8 col-lg-offset-2">
                <!-- <pre class="card card-block card-header mb-3 col-lg-8 col-lg-offset-1" formControlName="name">Model: {{selectedValue | json}}</pre> -->
                <!-- <pre class="card card-block card-header mb-3 col-lg-8 col-lg-offset-1">Selected skill: {{selectedOption | json}}</pre> -->

                <input [(ngModel)]="selectedValue" [typeahead]="technologies" typeaheadOptionField="name" (typeaheadOnSelect)="onSelect($event)" (ngModelChange)="change($event)" class="form-control col-lg-3" placeholder="Please input skill to search">
            </div>
            <div class="col-lg-8 col-lg-offset-2 alert_message">
                <div *ngFor="let alert of alerts">
                    <alert [type]="alert.type"><span [innerHtml]="alert.msg"></span></alert>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="save();modalRef.hide()">Save</button>
        <button type="button" class="btn btn-outline-primary" (click)="modalRef.hide()">Cancel</button>
    </div>
</ng-template>

<ng-template #deletetemplate>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Delete Notice</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
        Do you confirm to delete this record?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="delete(deleteId);modalRef.hide()">Confirm</button>
        <button type="button" class="btn btn-outline-primary" (click)="modalRef.hide()">Cancel</button>
    </div>
</ng-template>